<template>
	<!-- 考试详情-->
	<view class="body">
		<myHeader :title="title"></myHeader>
		<!-- 考试界面 -->
		<view class="p-20 m-20" style="border: 2px solid #e8e8e8;border-radius: 8px;">
			<view class="mtb-40" style="display: flex; font-weight: bold;font-size: 18px;">
				<view class="" style="flex: 0 0 70%">{{data.name}}</view>
				<view style="flex: 0 0 30%;color: #00a653;">{{data.statusLabel}}</view>
			</view>
			<view class="mtb-40" style="display: flex;">
				<view class="text-gray" style="flex: 0 0 30%;">考试时长</view>
				<view class="" style="flex: 0 0 70%;">{{data.time}}分钟</view>
			</view>
			<view class="mtb-40" style="display: flex;">
				<view class="text-gray" style="flex: 0 0 30%;">ppt</view>
				<view v-if="data.file == undefined || data.file ==null">
					<view class="ml-40">暂无文件</view>
				</view>
				<view class="ml-40" v-if="data.file != undefined" style="width: 100upx;height:100upx;">
					<image @click="$api(data.file)" style="width: 100upx;height:100upx;"
						src="/static/party_building/assets/files/files.png"></image>
				</view>
			</view>
			<!-- 如果考试完成后显示 data.status == 2-->
			<view class="mtb-40" style="display: flex;" v-if="data.status ==2 &&isDoneExam()">
				<view class="text-gray" style="flex: 0 0 30%;">考试成绩</view>
				<view class="" style="flex: 0 0 70%;font-weight: bold;font-size: 20px;color: red;">{{data.score}}</view>
			</view>
			<hr class="mt-20" style="background-color: #E5E5E5;height: 1px;border:none">
			<!-- 排名  data.status == 2 -->
			<view class="mt-20" v-if="isDone && rank.myRank >1">
				<view style="font-weight: bold;" class="mtb-40">考试排名</view>
				<view class="mtb-40" style="display: flex;">
					<view class="text-gray" style="flex: 0 0 30%;">我的排名</view>
					<view class="" style="flex: 0 0 70%;font-size: 18px;font-weight: bold;color: #ff0000;">{{myRank}}</view>
				</view>
				<view class="mtb-40" style="display: flex;" v-for="(item,index) in rank.rank" :key="index">
					<view class="text-gray" style="flex: 0 0 30%;">{{index}}</view>
					<view class="text-gray" style="flex: 0 0 35%;">{{item.realName}}</view>
					<view class="" style="flex: 0 0 35%;">{{item.userScore}}</view>
				</view>
			</view>
		</view>

		<!-- 组长编辑界面 待上传ppt： data.status==0 -->
		<view class="p-20 m-20" style="border: 2px solid #e8e8e8;border-radius: 8px;"  v-if="data.status == 0 && curUserid == data.executor">
			<view class="mtb-40" style="display: flex; font-weight: bold;font-size: 18px;">
				<view class="" style="flex: 0 0 70%">{{data.title}}</view>
				<view style="flex: 0 0 30%;color: #00a653;">{{data.statusLabel}}</view>
			</view>
			<view class="mtb-40" style="display: flex;">
				<view class="" style="flex: 0 0 70%;">{{data.note}}</view>
			</view>
			<view class="mtb-40" style="display: flex;">
				<view class="" style="flex: 0 0 30%">考试时间(分)</view>
				<uni-easyinput style="flex: 0 0 70%;" type="number" v-model="data.time" placeholder="请输入考试时间" />
			</view>
			<view class="mtb-40" style="display: flex;">
				<view class="text-gray" style="flex: 0 0 30%;">上传ppt</view>
				<view class="" style="flex: 0 0 70%;">
					<uni-file-picker limit="1" :auto-upload="true" mode="list" file-mediatype="all" @select="upload1">
					</uni-file-picker>
					<progress v-if="progressVal1 != 0" activeColor="#4CAF50" :percent="progressVal1"
						stroke-width="10"></progress>
				</view>
			</view>
			<view class="mtb-40" style="display: flex;">
				<view class="text-gray" style="flex: 0 0 30%;">上传题目</view>
				<view class="" style="flex: 0 0 70%;">
					<uni-file-picker limit="1" :auto-upload="true" mode="list" file-mediatype="all" @select="upload2">
					</uni-file-picker>
					<progress v-if="progressVal2 != 0" activeColor="#4CAF50" :percent="progressVal2"
						stroke-width="10"></progress>
				</view>
			</view>
		</view>
		<view class="mt-20 ">
			<!-- 当前用户是组长并且状态为待组长上传 -->
			<!-- data.status==0 -->
			<!-- <button class="bg-red text-white" @click="submit">提交</button> -->
			<button class="bg-red text-white" @click="submit" v-if="data.status == 0 && curUserid == data.executor">提交</button>
			<!-- 考试状态为进行中data.status == 1 -->
			<!-- <button class="bg-red text-white" @click="pageTo2('./doTest')">开始考试</button> -->
			<button class="bg-red text-white" @click="pageTo2('./doTest')"
				v-if="!isDone && data.status == 1">开始考试</button>
			<!-- data.status == 2 -->
			<!-- <button class="bg-red text-white" @click="pageTo1('./doTestDetail',data.questionId)">考试回顾</button> -->
			<button class="bg-red text-white" @click="pageTo1('./doTestDetail',data.id)"
				v-if="isDone">考试回顾</button>
		</view>
	</view>
</template>

<script>
	import myHeader from '../components/head.vue'
	import NetWorkTool from '@/api/netWorkTool'
	export default {
		data() {
			return {
				title: '考试详情',
				data: {},
				// 文件上传后的url
				fileUrl1: '',
				fileUrl2: '',
				progressVal1: 0,
				progressVal2: 0,
				// 当前用户id
				curUserid: 0,
				// 排名
				rank:{},
				// 是否做过试卷
				isDone: true,
			}
		},
		onLoad: function(option) {
			this.data = JSON.parse(option.data)
		},
		created() {
			this.isDoneExam();
			this.getUserId();
		},
		methods: {
			// 提交修改
			submit() {
				let param = {
					"file": this.fileUrl1,
					"id": this.data.id,
					"questionId": this.fileUrl2,
					"time": this.data.time,
				}
				NetWorkTool.POST('/api/weekly-question/finish', param, true).then(res => {
					uni.showToast({
						title: "上传成功",
						duration: 2000,
					});
					uni.navigateTo({
						url: './index'
					})
				})
			},
			// 上传ppt
			upload1(e) {
				let source = e.tempFiles[0];
				let token = '';
				uni.getStorage({
					key: 'AuthToken',
					success(e) {
						token = e
					}
				})
				const uploadTask = uni.uploadFile({
					url: '/api/uploadFile', //仅为示例，非真实的接口地址
					filePath: e.tempFilePaths[0],
					name: 'file',
					header: {
						'x-access-token': token.data
					},
					formData: {
						'name': source.name,
						'size': source.size
					},
					success: (res) => {
						this.fileUrl1 = JSON.parse(res.data).data.url;
						uni.showToast({
							title: "提交成功",
							duration: 2000,
						});
					}
				});
				uploadTask.onProgressUpdate((res) => {
					this.progressVal1 = res.progress;
				});
			},
			// 上传题目
			upload2(e) {
				let source = e.tempFiles[0];
				let token = '';
				uni.getStorage({
					key: 'AuthToken',
					success(e) {
						token = e
					}
				})
				const uploadTask = uni.uploadFile({
					url: '/api/weekly-question/import', //仅为示例，非真实的接口地址
					filePath: e.tempFilePaths[0],
					name: 'file',
					header: {
						'x-access-token': token.data
					},
					formData: {
						'name': source.name,
						'size': source.size
					},
					success: (res) => {
						this.fileUrl2 = JSON.parse(res.data).data;
						uni.showToast({
							title: "上传成功",
							duration: 2000,
						});
					}
				});
				uploadTask.onProgressUpdate((res) => {
					this.progressVal2 = res.progress;
				});
			},
			// 排名
			getOrder() {
				NetWorkTool.POSTFORM('/api/weekly-question/rank', {
					weeklyId: this.data.id
				}, false).then(res => {
					this.rank = res
				})
			},
			// 判断是否做过试题
			isDoneExam() {
				NetWorkTool.POSTFORM('/api/weekly-question/check', {
					weeklyId: this.data.id
				}, false).then(res => {
					// 0: 未做过；!0: 做过
					if (res == 0) {
						this.isDone =false;
					}
				})
			},
			pageTo(val) {
				uni.navigateTo({
					url: val
				})
			},
			pageTo1(val, id) {
				uni.navigateTo({
					url: val + "?id=" + id
				})
			},
			pageTo2(val) {
				uni.navigateTo({
					url: val + "?data=" + JSON.stringify(this.data)
				})
			},
			getUserId() {
				// 初始化当前用户id
				let id = 0;
				uni.getStorage({
					key: 'user',
					success(e) {
						
						id = e.data.user.userId;
					}
				});
				this.curUserid = id;
			},
		},

		components: {
			myHeader
		},
	}
</script>

<style lang="scss" scoped>
	@import url("/static/party_building/assets/style/federation.css");
</style>
